const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const JQuery = require('jquery')
const Webpack = require('webpack')
console.log("开发环境")
module.exports = {
    mode: 'development',
    devServer: {
        contentBase: path.resolve(__dirname, './dist'),
        port: '8080',
        inline: true, //实施重载模式，还有一种是frame框架模式
        compress: true,


        // 2)模拟数据  这种方式不需要express服务器
        before(app) {
            app.get('/user', function(req, res) {
                res.json({
                    "name": "jany-before"
                })
            });

        }

        // 1):代理访问  需要开一个express服务器
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3000', //配置了一个代理,只要请求有api开头的，都去3000端口找啦
        //         pathRewrite: { '/api': '' }
        //     }

        // }
    },
    plugins: [
        // dll动态链接库清单
        // new webpack.DllReferencePlugin({
        //     manifest: require('./dist/vendor-manifest.json')
        // }),
        new Webpack.ProvidePlugin({
            //将jquery注入到每一个模块中
            '$': 'JQuery'
        }),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: 'index.html',
            chunks: ['index', 'self']
        }),
        new HtmlWebpackPlugin({
            template: './public/page2.html',
            filename: 'page2.html',
            chunks: ['self']
        }),

        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'source-map'
};